imbric-theme 0.3.5 → 0.3.6

package/atoms/Checkbox/Checkbox.js

@@ -5,7 +5,8 @@ import styles from './Checkbox.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-export const Checkbox = ({ getStyles, onChange, label, id, value, name }) => {
+
+export const Checkbox = ({ getStyles, onChange, label, id, value, name, linkCheck, nameLinkCheck }) => {
 
   const [checked, setChecked] = React.useState(false);
 
@@ -14,17 +15,29 @@ export const Checkbox = ({ getStyles, onChange, label, id, value, name }) => {
 
     <div className={getStyles('checkbox')}>
 
-      <input
-      type="checkbox"
+      {/* <input
+        type="checkbox"
         id={id}
         name={name}
         label={label}
         value={value}
         onChange={onChange}
       />
-      {label}
+      &nbsp;{label} */}
+
+      <input className={getStyles('checkbox-custom')} 
+        type="checkbox"
+        id={id}
+        name={name}
+        label={label}
+        value={value}
+        onChange={onChange}
+ />
+      <label htmlFor={name} className={getStyles('checkbox-custom-label')}>{label}<a className={getStyles('checkbox-custom-link')} href={linkCheck} target="_black"> {nameLinkCheck}</a> </label>
+
+
     </div>
-    
+
   )
 }
 
@@ -33,17 +46,21 @@ Checkbox.propTypes = {
   onChange: PropTypes.func.isRequired,
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  label: PropTypes.string
+  value: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  nameLinkCheck: PropTypes.string,
+  linkCheck: PropTypes.string,
 }
 
 Checkbox.defaultProps = {
   getStyles: () => { },
   onChange: () => { },
-  id: '1',
-  name: '1',
+  id: 'hola',
+  name: 'hola',
   value: true,
   label: 'Hola',
+  nameLinkCheck: '',
+  linkCheck: '',
 }
 
 export default withStyles(styles)(Checkbox)

package/atoms/Checkbox/Checkbox.module.css

@@ -1,3 +1,54 @@
 .checkbox {
   display: flex;
 }
+
+/* ////////////////////// */
+
+
+.checkbox-custom {
+  opacity: 0;
+  position: absolute;   
+}
+
+.checkbox-custom, .checkbox-custom-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 5px;
+  cursor: pointer;
+  color: var(--color-brand-regent-gray);
+  font-weight: var(--font-weight-light);
+}
+
+.checkbox-custom + .checkbox-custom-label:before {
+  content: '';
+  background: #fff;
+  border-radius: 5px;
+  border: 2px solid #ddd;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10px;
+  height: 10px;
+  padding: 2px;
+  margin-right: 10px;
+  text-align: center;
+}
+
+.checkbox-custom:checked + .checkbox-custom-label:before {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 5px;
+  border: solid var(--color-brand-smalt);
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  border-radius: 0px;
+  margin: 0px 15px 5px 5px;
+}
+
+.checkbox-custom, .checkbox-custom-link {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-primary);
+  text-decoration: underline;
+}

package/atoms/Checkbox/Checkbox.stories.js

@@ -13,10 +13,12 @@ export default {
   title: 'Atoms/Checkbox',
   component: Checkbox,
   args: {
-    id: '1',
-    name: '1',
+    id: 'hola',
+    name: 'hola',
     value: true,
     label: 'Hola',
+    nameLinkCheck: '',
+    linkCheck: '',
   },
   argTypes: {
     // types: getOptionsArgTypes(options.types),

package/atoms/Input/Input.js

@@ -20,6 +20,7 @@ export const Input = ({
   onChange,
   onClick,
   placeholder,
+  pattern,
 }) => (
   <input
     className={getStyles('input', {

package/atoms/LinkItem/LinkItem.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+import styles from './LinkItem.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Paragraph from '../Paragraph'
+
+export const LinkItem = ({ children, size, color, getStyles, isHref }) => {
+  return (
+    <Link href={isHref} passHref>
+      <a className={getStyles('link', ['color'])}>
+        <Paragraph size={size} color={color} weight="semibold" isInline>
+          {children}
+        </Paragraph>
+      </a>
+    </Link>
+  )
+}
+
+LinkItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
+}
+
+LinkItem.defaultProps = {
+  getStyles: () => { },
+  color: 'primary',
+  size: 'md',
+  isHref: '/',
+}
+
+export default withStyles(styles)(LinkItem)

package/atoms/{Link/Link.module.css → LinkItem/LinkItem.module.css}

@@ -1,7 +1,7 @@
 .link {
   display: inline;
   max-width: max-content;
-  border-bottom: 1px solid currentColor;
+  /* border-bottom: 1px solid currentColor; */
   cursor: pointer;
 }
 
@@ -12,3 +12,8 @@
 .color-tertiary {
   color: var(--color-tertiary);
 }
+
+.link p {
+  font-weight: var(--font-weight-normal);
+  text-decoration: underline;
+}

package/atoms/{Link/Link.stories.js → LinkItem/LinkItem.stories.js}

@@ -1,4 +1,4 @@
-import { Link, styles, options } from '.'
+import { LinkItem, styles, options } from '.'
 
 import {
   getTemplate,
@@ -6,12 +6,12 @@ import {
   getOptionsArgTypes,
 } from '../../helpers/storybook'
 
-const Template = getTemplate(Link, styles)
-const ListTemplate = getListTemplate(Link, styles)
+const Template = getTemplate(LinkItem, styles)
+const ListTemplate = getListTemplate(LinkItem, styles)
 
 export default {
-  title: 'Atoms/Link',
-  component: Link,
+  title: 'Atoms/LinkItem',
+  component: LinkItem,
   args: {
     children: 'Mouths Muil',
   },

package/atoms/LinkItem/index.js

@@ -0,0 +1,3 @@
+export { default, LinkItem } from './LinkItem'
+export { options } from './constants'
+export { default as styles } from './LinkItem.module.css'

package/index.js

@@ -24,7 +24,7 @@ export { default as Heading } from './atoms/Heading'
 export { default as Icon } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
 export { default as Label } from './atoms/Label'
-export { default as Link } from './atoms/Link'
+export { default as LinkItem } from './atoms/LinkItem'
 export { default as Modal } from './atoms/Modal'
 export { default as Paragraph } from './atoms/Paragraph'
 export { default as Picture } from './atoms/Picture'

package/molecules/ColumnTable/ColumnTable.js

@@ -113,12 +113,14 @@ ColumnTable.propTypes = {
   handleSorting: PropTypes.func.isRequired,
   getStyles: PropTypes.func.isRequired,
   columnUppercase: PropTypes.bool,
+  onChangeInput: PropTypes.func,
 }
 
 ColumnTable.defaultProps = {
   getStyles: () => { },
   handleSorting: () => { },
   columnUppercase: false,
+  onChangeInput: () => { },
 }
 
 export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.stories.js

@@ -16,9 +16,9 @@ export default {
     columnUppercase: false,
     columnsData: options.columns,
   },
-  argTypes: {
-    // typeInput: getOptionsArgTypes(options.typeInput),
-  },
+  // argTypes: {
+  //   // typeInput: getOptionsArgTypes(options.typeInput),
+  // },
 }
 
 export const Default = Template.bind({})

package/molecules/DynamicSelect/DynamicSelect.js

@@ -43,6 +43,15 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
       paddingTop: '2px',
     }),
 
+    placeholder: (base) => ({
+      ...base,
+      color: 'var(--color-brand-white-lilac)',
+      fontWeight: 'var(--font-weight-light)',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }),
+
   }
 
   // const handleChange = (value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",

package/atoms/Link/Link.js

@@ -1,33 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styles from './Link.module.css'
-import { options } from './constants'
-import withStyles from '../../hocs/withStyles'
-
-import Paragraph from '../Paragraph'
-
-export const Link = ({ children, size, color, getStyles }) => {
-  return (
-    <a className={getStyles('link', ['color'])}>
-      <Paragraph size={size} color={color} weight="semibold" isInline>
-        {children}
-      </Paragraph>
-    </a>
-  )
-}
-
-Link.propTypes = {
-  children: PropTypes.node.isRequired,
-  getStyles: PropTypes.func.isRequired,
-  color: PropTypes.oneOf(options.colors),
-  size: PropTypes.oneOf(options.sizes),
-}
-
-Link.defaultProps = {
-  getStyles: () => {},
-  color: 'primary',
-  size: 'md',
-}
-
-export default withStyles(styles)(Link)

package/atoms/Link/index.js

@@ -1,3 +0,0 @@
-export { default, Link } from './Link'
-export { options } from './constants'
-export { default as styles } from './Link.module.css'