imbric-theme 0.1.1 → 0.1.3

package/atoms/Modal/Modal.module.css

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--modal-backdrop-color);
+  background: rgb(0 0 0 / 50%);
   inset: 0;
 }
 
@@ -24,7 +24,28 @@
   padding: 16px 32px;
 }
 
-:not(.is-playground) > .modal {
+.modal-full {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
+.modal-full-soft {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
+:not(.is-playground)>.modal {
+  animation: fadeInModal 0.4s ease-in forwards;
+  opacity: 0;
+}
+
+:not(.is-playground)>.modal-full {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
 }
@@ -33,6 +54,10 @@
   animation: fadeOutModal 0.4s ease-in forwards;
 }
 
+.backdrop.on-fade-out .modal-full {
+  animation: fadeOutModal 0.4s ease-in forwards;
+}
+
 .heading {
   display: flex;
   justify-content: space-between;
@@ -45,7 +70,7 @@
 }
 
 .type-primary {
-  background-color: var(--color-primary);
+  background-color: var(--color-primary-inverted);
 }
 
 .type-secondary {
@@ -54,14 +79,46 @@
 
 @media (min-width: 992px) {
   .modal {
-    max-width: var(--modal-desktop-max-width);
-    height: var(--modal-desktop-height);
+    max-width: 600px;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+    /* max-height: 100%;
+    overflow: auto; */
+  }
+
+  .modal-full {
+    width: 100%;
+    height: 100%;
+    padding: 16px 32px;
+  }
+
+  .modal-full-soft {
+    width: 90%;
+    height: auto;
     border-radius: var(--border-radius-sm);
   }
 
   .heading {
     flex-direction: row-reverse;
   }
+
+  .container {
+    max-height: 700px;
+    overflow: auto;
+    min-width: 100%;
+  }
+
+  .container-full {
+    overflow: auto;
+    min-width: 100%;
+  }
+
+  .container-full-soft {
+    max-height: 700px;
+    overflow: auto;
+    min-width: 100%;
+  }
+
 }
 
 @keyframes fadeInModal {
@@ -82,4 +139,4 @@
   to {
     opacity: 0;
   }
-}
+}

package/atoms/Paragraph/Paragraph.module.css

@@ -1,5 +1,9 @@
 .paragraph {
   width: 100%;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 
 .color-base {

package/atoms/Paragraph/Paragraph.stories.js

@@ -14,7 +14,7 @@ export default {
   component: Paragraph,
   args: {
     children:
-      'Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?',
+      'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.',
   },
   argTypes: {
     color: getOptionsArgTypes(options.colors),
@@ -36,7 +36,7 @@ export const Centered = Template.bind({})
 Centered.args = {
   isCentered: true,
   children:
-    'Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.',
+    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
 }
 
 export const Monospace = Template.bind({})

package/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap

@@ -18,7 +18,7 @@ exports[`Storyshots Atoms/Paragraph Centered 1`] = `
   <p
     className="paragraph color-base size-md weight-normal is-centered"
   >
-    Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
   </p>
 </div>
 `;
@@ -41,27 +41,27 @@ exports[`Storyshots Atoms/Paragraph Colors 1`] = `
   <p
     className="paragraph color-base size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-muted size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-inverted size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-primary size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-tertiary size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
 </div>
 `;
@@ -84,7 +84,7 @@ exports[`Storyshots Atoms/Paragraph Default 1`] = `
   <p
     className="paragraph color-base size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
 </div>
 `;
@@ -130,7 +130,7 @@ exports[`Storyshots Atoms/Paragraph Monospace 1`] = `
   <p
     className="paragraph color-base size-md weight-normal is-monospace"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
 </div>
 `;
@@ -153,22 +153,22 @@ exports[`Storyshots Atoms/Paragraph Sizes 1`] = `
   <p
     className="paragraph color-base size-xs weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-base size-sm weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-base size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-base size-lg weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
 </div>
 `;
@@ -191,7 +191,7 @@ exports[`Storyshots Atoms/Paragraph Striked 1`] = `
   <p
     className="paragraph color-base size-md weight-normal is-striked"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
 </div>
 `;
@@ -214,17 +214,17 @@ exports[`Storyshots Atoms/Paragraph Weights 1`] = `
   <p
     className="paragraph color-base size-md weight-normal"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-base size-md weight-medium"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
   <p
     className="paragraph color-base size-md weight-semibold"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
   </p>
 </div>
 `;

package/atoms/Picture/Picture.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Link from 'next/link'
 
 import styles from './Picture.module.css'
 import withStyles from '../../hocs/withStyles'
@@ -11,6 +12,7 @@ export const Picture = ({
   height,
   isRounded,
   withBorder,
+  isHref,
 }) => (
   <picture
     className={getStyles('picture', {
@@ -18,7 +20,10 @@ export const Picture = ({
       'with-border': withBorder,
     })}
   >
-    <img src={src} style={{ height, maxWidth: width }} />
+    <Link href={isHref} passHref>
+      <img src={src} style={{ height, maxWidth: width }} />
+    </Link>
+
   </picture>
 )
 
@@ -29,12 +34,14 @@ Picture.propTypes = {
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   isRounded: PropTypes.bool,
   withBorder: PropTypes.bool,
+  isHref: PropTypes.any
 }
 
 Picture.defaultProps = {
   height: 'auto',
   withBorder: false,
-  getStyles: () => {},
+  getStyles: () => { },
+  isHref: ''
 }
 
 export default withStyles(styles)(Picture)

package/atoms/Tab/Tab.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Tab.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const Tab = ({ getStyles, children, activeTab, viewTab, onClick }) => {
+
+  if (viewTab) {
+    return (
+      <>
+        <li className={getStyles('tab', { 'active': activeTab })} onClick={onClick && handleClick({ onClick })}>
+          {children}
+        </li>
+      </>
+    )
+
+  } else {
+    null
+  }
+}
+
+Tab.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  activeTab: PropTypes.bool.isRequired,
+  viewTab: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+Tab.defaultProps = {
+  getStyles: () => { },
+  onClick: () => { },
+}
+
+export default withStyles(styles)(Tab)

package/atoms/Tab/Tab.module.css

@@ -0,0 +1,17 @@
+.tab {
+  display: flex;
+  font-size: var(--font-size-base);
+  cursor: pointer;
+  color: var(--color-font-highlight);
+  padding: 1.1em 1.5em;
+}
+
+.tab:hover {
+  color: var(--color-primary);
+  border-bottom: 2px solid  var(--color-primary);
+}
+
+.tab.active {
+  color: var(--color-primary);
+  border-bottom: 2px solid  var(--color-primary);
+}

package/atoms/Tab/Tab.stories.js

@@ -0,0 +1,27 @@
+import { Tab, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Tab, styles)
+const ListTemplate = getListTemplate(Tab, styles)
+
+export default {
+  title: 'Atoms/Tab',
+  component: Tab,
+  args: {
+    children: 'Taksee',
+    activeTab: false,
+    viewTab: true,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/atoms/Tab/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/atoms/Tab/index.js

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

package/atoms/Textarea/Textarea.js

@@ -1,14 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-
+import ReactTooltip from 'react-tooltip'
 import styles from './Textarea.module.css'
 import withStyles from '../../hocs/withStyles'
 
 const DEFAULT_TEXTAREA_ROWS = 5
 
-const handleChange = ({ onChange }) => () => {
-  onChange()
-}
+import Icon from '../../atoms/Icon'
 
 export const Textarea = ({
   children,
@@ -16,16 +14,99 @@ export const Textarea = ({
   placeholder,
   onChange,
   getStyles,
+  value,
+  id,
+  disabled,
+  viewBoxCopyCode,
+  txtBtnCopyCode,
+  txtTootipCopyCode,
 }) => {
+
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+  const handleClick = async () => {
+
+    // // Select the text field
+    // txtTootipCopyCode.select()
+    // txtTootipCopyCode.setSelectionRange(0, 99999) // For mobile devices
+
+    // // Copy the text inside the text field
+    // navigator.clipboard.writeText(txtTootipCopyCode.value)
+
+    // // Alert the copied text
+    // alert("Copied the text: " + txtTootipCopyCode.value)
+
+
+
+
+    try {
+      await navigator.clipboard.writeText(txtTootipCopyCode);
+      console.log('Content copied to clipboard');
+      /* Resolved - text copied to clipboard successfully */
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+      /* Rejected - text failed to copy to the clipboard */
+    }
+
+
+
+
+  }
+
   return (
-    <textarea
-      className={getStyles('textarea')}
-      rows={rows}
-      placeholder={placeholder}
-      onChange={handleChange({ onChange })}
-    >
-      {children}
-    </textarea>
+    <>
+      {viewBoxCopyCode ?
+        <>
+          <span
+            data-tip
+            data-for='tooltipCopyCode'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            style={{ width: 'max-content', display: 'block' }}
+          >
+            <>
+              <div className={getStyles('boxCopyCode')}>
+                <Icon
+                  name="infoExampleCode"
+                />
+                <div className={getStyles('btnCopyCode')} onClick={handleClick}>
+                  {txtBtnCopyCode}
+                </div>
+              </div>
+            </>
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='tooltipCopyCode' type='error'>
+              <span>{txtTootipCopyCode}</span>
+            </ReactTooltip>
+          ) : null}
+
+        </>
+
+        : null}
+      <textarea
+        id={id}
+        className={getStyles('textarea')}
+        rows={rows}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={value}
+        disabled={disabled}
+      >
+        {children}
+      </textarea>
+    </>
   )
 }
 
@@ -35,12 +116,22 @@ Textarea.propTypes = {
   onChange: PropTypes.func.isRequired,
   rows: PropTypes.number,
   placeholder: PropTypes.string,
+  value: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  viewBoxCopyCode: PropTypes.bool,
+  txtBtnCopyCode: PropTypes.string,
+  txtTootipCopyCode: PropTypes.string,
 }
 
 Textarea.defaultProps = {
-  getStyles: () => {},
-  onChange: () => {},
+  getStyles: () => { },
+  onChange: () => { },
   rows: DEFAULT_TEXTAREA_ROWS,
+  id: '',
+  disabled: false,
+  viewBoxCopyCode: false,
+  txtBtnCopyCode: 'COPIAR',
+  txtTootipCopyCode: 'yeeeee'
 }
 
 export default withStyles(styles)(Textarea)

package/atoms/Textarea/Textarea.module.css

@@ -1,7 +1,7 @@
 .textarea {
   display: flex;
   width: 100%;
-  min-height: 100px;
+  /* min-height: 100px; */
   padding: 20px;
   border: var(--border-width-thin) solid var(--color-cool-gray-200);
   background: var(--input-background);
@@ -9,7 +9,7 @@
   box-shadow: var(--box-shadow-sm);
   color: var(--color-font-base);
   font-family: var(--font-family-sans);
-  font-size: var(--input-font-size);
+  font-size: var(--paragraph-font-size-xs);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-tight);
   resize: vertical;
@@ -23,3 +23,32 @@
   box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
   outline: none;
 }
+
+.textarea:disabled {
+  background-color: hsl(0, 0%, 95%);
+  border-color: hsl(0, 0%, 90%);
+}
+
+.boxCopyCode {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  /* margin-top: -44px; */
+  /* position: absolute; */
+  /* top: 108px;
+  right: 24px; */
+}
+
+.btnCopyCode {
+  font-size: 10px;
+  border: 1px solid var(--color-font-base);
+  padding: 3px;
+  border-radius: 3px;
+  color: var(--color-font-base);
+}
+
+.btnCopyCode:hover {
+  border: 1px solid var(--color-font-base);
+  color: #fff;
+  background-color: var(--color-font-base);
+}

package/atoms/Toggle/Toggle.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Toggle.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Toggle = ({ getStyles, onChangeCheckbox, disabled, id, checked, name }) => {
+
+  // const [isChecked, setIsChecked] = useState(false);
+
+  // const handleOnChange = () => {
+  //   setIsChecked(!isChecked)
+  // };
+
+
+  return <div className={getStyles('toggle')}>
+
+    <input
+      type="checkbox"
+      id={id}
+      name={name}
+      disabled={disabled}
+      // checked={isChecked || checked}
+      checked={checked}
+      onChange={(e) => {
+        // handleOnChange()
+        onChangeCheckbox(e)
+      }}
+      className={getStyles('toggle-item')}
+    />
+    <label htmlFor={id} className={getStyles('checkbox-custom-label')}></label>
+
+
+  </div>
+}
+
+Toggle.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onChangeCheckbox: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+}
+
+Toggle.defaultProps = {
+  getStyles: () => { },
+  onChangeCheckbox: () => { },
+  id: 'toggle',
+  name: 'toggle',
+  checked: false,
+  disabled: false,
+}
+
+
+export default withStyles(styles)(Toggle)